<template>
<div id="menu-page">
  <el-container>
    <el-header>
      <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" :router="true">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/goods-list">二手集市</el-menu-item>
        <el-menu-item index="/classify" v-if="currentUserId">分类</el-menu-item>
        <el-menu-item index="/discuss">留言板</el-menu-item>
        <el-menu-item style="float:right">
          <router-link to="goods-add" v-if="currentUserId">
            <el-button>发布你的二手商品 </el-button>
          </router-link>
          <router-link to="user" v-if="currentUserId">
            <i class="el-icon-s-custom" style="font-size: 30px; margin-left: 25px;}"></i>
          </router-link>
          <router-link to="login" v-if="!currentUserId">
            <el-button>登陆</el-button>
          </router-link>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-container style="padding:20px">
      <router-view />
    </el-container>
  </el-container>
</div>
</template>

<script>
export default {
  name: 'menuPage',
  data() {
    return {
      currentUserId: ''
    }
  },
  created() {
    this.currentUserId = this.$store.state.userId;
  },
  methods: {
    goRouter: function (router) {
      this.$router.push({
        name: router
      })
    }
  }
}
</script>

<style scoped>
#menu-page {
  width: 80%;
  min-width: 1120px;
  margin: 0 auto;
}
</style>
